<template>
	<!--审批人那一行 框-->
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>

			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="brand" placeholder="请选择品牌名称" @change="getCompanyInfo" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="companyId" placeholder="请选择公司名称" @change="getactivity" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>

			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">活动:</p>
			</el-col>
			<el-col :span="4">

				<!--下拉菜单 开始-->
				<el-select v-model="couponName" style="width:100%" placeholder="请选择活动" size="small" clearable>
					<el-option v-for="item in actives" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<!--下拉菜单 结束-->

			</el-col>

			</el-row>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">开始日期:</p>
			</el-col>
			<el-col :span="4">
				<!--选择日期 开始-->

				<el-date-picker v-model="startTime" size="small" type="date" style="width:95%" placeholder="使用时间-开始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">结束日期:</p>
			</el-col>
			<el-col :span="4">

				<el-date-picker v-model="stopTime" size="small" type="date" style="width:95%" placeholder="使用时间-结束日期">
				</el-date-picker>

				<!--选择日期 结束-->
			</el-col>

			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="4">

				<el-input v-model="plateNum" style="width:95%" size="small" placeholder="请选择车牌号">
				</el-input>

			</el-col>
			<el-col :span="2" style="text-align: center">
				<el-button type="primary" size="small" @click="resRoleQuery">查询</el-button>
			</el-col>
			<el-col :span="7" style="text-align: right;margin-left: -30px;">
				<el-button type="primary" size="small" v-on:click='Export'>导出</el-button>

			</el-col>
		</el-row>

		<!--审批人那一行  框 结束-->
		<!--表格-->
		<!--
																																																		作者：吴彦昭
																																																		时间：2017-03-20 18:20
																																																		描述：KPI 表格整理
																																																	-->
		<template>
			<el-table :data="tableData.dataList" border style="height: 460px;">
				<el-table-column type="index" label="序号" fixed width="70" align="right"></el-table-column>
				<el-table-column prop="num" label="优惠劵号" fixed width="250" align="right">
				</el-table-column>
				<el-table-column prop="gongdanId" width="180" fixed label="使用工单">
				</el-table-column>
				<el-table-column prop="useDate" label="使用时间" width="200" fixed :formatter="formatTime" align="center">
				</el-table-column>
				<el-table-column prop="useRemark" width="160" label="使用备注">
				</el-table-column>
				<el-table-column prop="dayinDate" label="发券时间" :formatter="formatDyTime" width="180" align="center">
				</el-table-column>
				<el-table-column prop="activityName" label="所属活动" width="180">
				</el-table-column>
				<el-table-column prop="couponType" label="优惠券类型" width="120" :formatter="couponCov">
				</el-table-column>
				<el-table-column prop="gift" label="赠送礼品" width="120">
				</el-table-column>
				<el-table-column prop="" label="活动成本" width="120" :formatter="countCost" align="right">
				</el-table-column>
				<el-table-column prop="cost" width="120" label="礼品价值" align="right">
				</el-table-column>
				<el-table-column prop="remainder" width="120" label="剩余金额" align="right">
				</el-table-column>
				<el-table-column prop="useMoney" width="120" label="使用金额" align="right">
				</el-table-column>

				<el-table-column prop="plateNum" width="120" label="车牌号">
				</el-table-column>
				<el-table-column prop="contactName" width="120" label="车主姓名">
				</el-table-column>
				<el-table-column prop="contactPhone" width="120" label="联系电话" align="right">
				</el-table-column>

			</el-table>
		</template>
		<!--表格 结束-->
		<!--翻页 开始-->
		<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
		</el-pagination>
		<!--翻页 结束-->
	</el-form>
	<!--优惠券 申请列表 结束-->
</template>
<script>
	//首页 切换页 申请列表 和 申请补发
	//先写的 申请补发
	export default {
		data: function() {
			return {
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				//列表  查询条件
				couponName: '',
				//开始日期 结束 日期
				startTime: '',
				stopTime: '',
				//车牌号
				plateNum: '',
				//下拉列表 开始
				value: '',
				//下拉列表  结束
				//选择时间  开始
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				value1: '',
				value2: '', //选择时间 结束
				//活动清单
				actives: [],

				//车牌号 查询 按钮

				//车牌号 导出 按钮

				//申请列表
				formInline: {
					user: '',
					region: ''
				},
				//页码数001
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//分组数据
				tableData: {
					total: 0,
					dataList: []
				},
				//申请列表 下面的表格
				tableData: [],
				//翻页 功能

				//表单名称
				formLabelAlign: {
					name: '',
					region: '',
					type: ''
				},

			}
		},
		methods: {
			//表格中优惠券类型
			couponCov: function(row) {
				if(row.couponType == '1') {
					return "储值卡";
				} else {
					return "优惠券";
				}
			},
			//导出按钮
			Export: function() {
				if(this.$data.startTime != "") {
					this.$data.startTime = this.moment(this.$data.startTime).format("YYYY-MM-DD");
				}
				if(this.$data.stopTime != "") {
					this.$data.stopTime = this.moment(this.$data.stopTime).format("YYYY-MM-DD");
				}
				window.location.href = this.API_ROOT + '/crm/coupon/excel/exportRecord?uid=' + window.localStorage.getItem("uid") + "&&companyId=" + this.$data.companyId+
				"&&plateNum="+ this.$data.plateNum +
						"&&activityId="+ this.$data.couponName +
						"&&startDate="+ this.$data.startTime +
						"&&endDate="+ this.$data.stopTime +
						"&&area="+this.$data.area +
						"&&brand="+ this.$data.brand;
			},
			//当点击 导出 按钮的时候
			//		Rexport: function () {
			//			alert("显示导出情况！");
			//
			//		},
			//加载列表 当点击查询按钮时
			resRoleQuery: function() {
				debugger;
				if(this.$data.startTime != "") {
					this.$data.startTime = this.moment(this.$data.startTime).format("YYYY-MM-DD");
				}
				if(this.$data.stopTime != "") {
					this.$data.stopTime = this.moment(this.$data.stopTime).format("YYYY-MM-DD");
				}
				if(this.$data.companyId == ""){
					this.$message.error("请选择公司！");
				}else{
					this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/coupon/useRecordPage', //url 优惠劵使用日志
					params: { //发送的参数
						//提取 车牌号 的数据
						plateNum: this.$data.plateNum,
						//提取 下拉菜单
						activityId: this.$data.couponName,
						//提取 开始时间
						startDate: this.$data.startTime,
						//提取 结束时间
						endDate: this.$data.stopTime,

						start: this.$data.CurentPage, //每页的页码
						limit: this.$data.page.pageSize, //每页的数量
						area:this.$data.area,//区域
						brand: this.$data.brand,//品牌
						companyId: this.$data.companyId,//公司
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
				}

			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.resRoleQuery();
			}, //分页传参 结束
			//加载列表 结束
			//日期转换
			formatTime: function(row, column) {
				if(row.useDate == "" || row.useDate == null) return "";
				return this.moment(Number(row.useDate)).format("YYYY-MM-DD HH:mm:ss");
			},
			countCost: function(row) {
				if(!row.gsCost) {
					row.gsCost = 0;
				}
				if(!row.degression) {
					row.degression = 0;
				}
				return Number(row.gsCost) + Number(row.degression);
			},

			formatDyTime: function(row, column) {
				if(row.printDate == "" || row.printDate == null) return "";
				return this.moment(Number(row.printDate)).format("YYYY-MM-DD HH:mm:ss");
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
//				this.$data.companyId = ""; //清空单位
				this.$data.companyCombo = [];

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0){
						this.$data.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},
			//获取活动
			getactivity: function() {
				this.$data.actives = [];
				this.$data.couponName = "";
				//获取所属活动下拉
				this.$http.get(this.API_ROOT + '/crm/activity/combo', {
					params: {
						companyId: this.$data.companyId,
					}
				}).then((response) => {
					this.$data.actives = response.data;
				}, (response) => {});
			},
		},
		//***获取下拉列表的方法 模块
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
//			//获取所属活动 的  下拉 路径
//			this.$http.get(this.API_ROOT + '/crm/activity/combo', {
//				params: {}
//			}).then((response) => {
//				this.$data.actives = response.data;
//			}, (response) => {});
		} //***获取下拉列表的方法 模块  结束

	}
</script>